{% extends "new_base.html" %}
{% load static from staticfiles %}
<script src="{%static "js/nguyen.js" %}" type="text/javascript"></script>
{% block css %}
<link rel="stylesheet" type="text/css" media="all" href="{%static "css/base.css" %}" />
<link rel="stylesheet" type="text/css" media="all" href="{%static "jquery-ui-1.10.3/themes/base/jquery-ui.css" %}" />
{% endblock %}
{% block javascriptload %}
<script>
	$('#btn_creer_poudre').click(function()
    {
              $("#customPopup").dialog({
		      	title: "Modifier les coordonnées client",
		        modal: true,
		        position: 'top',
		        width:'850px',
		        height:'200px',
		        resizable: false
		      });
		     $("#customPopup").html("data");
		           
     });



	//Auto completion
	$(function() {
		$("#tags").autocomplete({
			source : "/autocompletion_poudre",
			minLength : 1,
			autoFocus : true,
		});
	});
	////////////////////////////

	function showdetails(exp,code) {
		//exp = $("#exp")
		chercher(exp,code)
		$(".toggler_liste_poudres").hide();
		$(".toggler_search").hide();
		$(".toggler_agenda_poudre").hide();
		//$(".toggler_create_poudre").hide()
		$(".toggler_add_event").hide()
		var options = {};
		$(".toggler_agenda_poudre").effect("slide", options, 500);
	}

	function chercher(e,code) {
		var lien = "/search_poudre?term=" + e.replace(/ /g, '_')
		$.getJSON(lien, function(data) {
			$("#tab_agenda").empty()
			html = "<tr" + " class =row" + row + ">" + "<th>" + "Xuất/Nhâp" + "</th>" + "<th>" + "Ngày Tháng" + "</th>" + "<th>" + "Số lượng" + "</th>" + "<th>" + "Giá thành" + "</th>" + "<th>" + "Thành giá" + "</th>" + "<th>" + "Kho" + "</th>" + "</tr>";
			for (var i = 0; i < data.length; i++) {
				var row = (i % 2)
				html += "<tr" + " class =row" + row + ">" + "<th>" + data[i][0] + "</th>" + "<th>" + data[i][1] + "</th>" + "<th>" + data[i][2] + "</th>" + "<th>" + data[i][3] + "<th>" + data[i][4] + "</th>" + "<th>" + data[i][5] + "</th>" + "</tr>"

			}
			title = e+" - "+code
			$("#poudre").empty()
			$("#poudre").append(title)
			$("#nomP").empty()
			$("#nomP").append(title)
			$("#tab_agenda").append(html)
		});
	}
	
	
	function extrait_selon_separateur(chaine) {
    	var exp=new RegExp("-","g");
    	var tab=chaine.split(exp);
    return tab;
  	}

	////////////////////////////////////////////////////////
	opendialogopendialog
		function hideall() {
			$(".toggler_add_event").hide();
			$(".toggler_liste_poudres").hide();
			$(".toggler_search").hide();
			$(".toggler_agenda_poudre").hide();
			//$(".toggler_create_poudre").hide()
		}

		// run the currently selected effect
		function runEffect(cequilfaut) {
			// get effect type from
			var selectedEffect = "slide";
			// most effect types need no options passed by default
			var options = {};
			// run the effect
			$(cequilfaut).effect("slide", options, 500);
		};

		$("#liste_button").click(function(e) {
			hideall()
			e.preventDefault()
			runEffect(".toggler_liste_poudres");
			return false;
		});
		$("#button_search").click(function(e) {
			exp = $("#tags").val()
			tab = extrait_selon_separateur(exp);
			chercher(tab[0],tab[1])
			hideall()
			e.preventDefault()
			runEffect(".toggler_agenda_poudre")
			return false;
		});
		$("#search_button").click(function(e) {
			hideall()
			e.preventDefault()
			runEffect(".toggler_search");
			$("#tags").empty()
			return false;
		});

		$("#create").click(function(e) {
			hideall()
			e.preventDefault()
			runEffect(".toggler_create_poudre");
			return false;
		});
		
		$("#addevent").click(function(e) {
			hideall()
			e.preventDefault()
			runEffect(".toggler_add_event");
			$.get("/souscription/{{ sous.pk }}/resilier/",
			function(data) {
				$(".customPopup").html(data);
		 	});
			return false;
		});
		$(".toggler_liste_poudres").hide();
		$(".toggler_search").hide();
		$(".toggler_agenda_poudre").hide();
		//$(".toggler_create_poudre").hide()
		$(".toggler_add_event").hide();
	});
	// set effect from select menu value

</script>
<script>
	$(function() {
		$("#menu").menu();
	}); 
	$(function() {
		$("#datepicker_creerP").datepicker();
		$("#datepicker_creerE").datepicker();
		$("#datepicker_creerC").datepicker();
	}); 
</script>
<style>
	.ui-menu {
	}
</style>
 <style>
	/*Select tableau*/
	#feedback {
		font-size: 1.4em;
	}
	#nomP {
		font-size: 1.4em;
	}
	#selectable .ui-selecting {
		background: #FECA40;
	}
	#selectable .ui-selected {
		background: #F39814;
		color: white;
	}
	#selectable {
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 60%;
	}
	#selectable tr {
		margin: 3px;
		padding: 0.4em;
		font-size: 1.4em;
		height: 18px;
		width: 74px;
	}
</style>
<script>
	$(function() {
		$("#selectable").selectable({
			stop : function() {
				var result = $("#select-result").empty();
				$(".ui-selected", this).each(function() {
					var index = $("#selectable li").index(this);
					switch (index){
						case 0: result.append("Xuất");
								break;
						case 1: result.append("Nhập");
								break;
						case 2: result.append("Bán lại");
								break;
					}
				});
			}
		});
	}); 
</script>

{% endblock %}

{% block menu %}
<h3>Quản lí bột</h3>
<div class="wrapper p2">
	<div class="extra-wrap">
		<ul id="menu">
			<li>
				<a id ="liste_button">Liste bột đã nhập</a>
			</li>
			<li>
				<a id ="search_button">Tìm bột</a>
			</li>
		</ul>
	</div>
</div>
<a class="button" id="btn_creer_poudre" >Tạo bột mới</a>
<!--img src="{% static "bouton/addP.png" %}" id="create" /-->
{% endblock %}

{% block content %}
<!--div id="accordion"-->
<div class="toggler_search">
	<div id="effect">
		<h4> Tìm kiếm bột: </h4>
		<p id="contenu_du_toggler">
			<div style="text-align: center;">
				<div class="ui-widget">

					<label for="tags"><h1>Nhập tên bột: </h1></label>
					<input id="tags" type="text" onFocus="this.value='' ; "/>
					<a id="button_search" class="button" href="#">Tìm</a>
				</div>
			</div>
		</p>
	</div>
</div>

<div class="toggler_agenda_poudre">
	<div id="effect" >
		<h4 id="poudre" value=""></h4>
		<p id="contenu_du_toggler">
			<table style="width: 100%; padding: 5px;"  class="tabcenter">
				<thead class="ui-widget-header" id="tab_agenda"></thead>
				<tbody>
			</table>
			<br/>
			<a class="button" id="addevent" style=" margin-right: 10px">Xuất/Nhập</a>
		</p>
	</div>
</div>

<div class="toggler_liste_poudres">
	<div id="effect">
		<h4> Liste bột đã nhập: </h4>
		<p id="contenu_du_toggler">
			{% if latest_list %}
			<ol>
				{% for p in latest_list %}
				<li id="details">
					<a href="javascript: showdetails('{{p.nom}}','{{p.codeP}}')">{{ p.nom }} - {{p.codeP}}</a>
				</li>
				{% endfor %}
			</ol>
			{% else %}
		<p>
			No polls are available.
		</p>
		{% endif %}
		<table style="width: 100%; padding: 5px;"  class="tabcenter">
			<thead class="ui-widget-header" id="tab_agenda"></thead>
			<tbody>
		</table>									
	</div>
</div>

<div class="toggler_create_poudre">
	<div id="effect" >
		<h3 >Tạo bột mới :</h3>
		<p id="contenu_du_toggler">
			<form action="/poudres/create" method="post">
				<div>
					<label for="nom">Tên bột :</label>
					<input type="text" id="nom" />
					<label for="codeP">Mã bột :</label>
					<input type="code" id="codeP" />
				</div>
				<div>
					<label for="dateP">Ngày tạo :</label>
					<input type="text" id="datepicker_creerP" />
					<div class="button">
						<button type="submit">
							Tạo bột
						</button>
					</div>
				</div>
			</form>
		</p>
	</div>
</div>

<div class="toggler_add_event">
	<div id="effect">
		<h4> Xuất nhập:</h4>
		<p id="contenu_du_toggler">
			<div style="text-align: center;">
				<div class="ui-widget">
					<form id="ES-form" method="post">
						<fieldset>
							<div class="wrapper1">
								<label class="img-indent2"><span class="text-form">Tên bột:</span> <a id="nomP"> </a></label>
							</div>
							<div class="wrapper">
							<label class="img-indent2"><span class="text-form">Thao tác:</span>
								<select id="TE" name="TE_liste">
										<option value="0000">-------------------------------</option>
										{% for TE in TE_list %}
											<option value="{{TE.id}}">{{TE.nomTE}}</option>
										{% endfor %}
									</select>
								</label>	
							</div>
							<div class="wrapper">
								<label class="img-indent2"><span class="text-form">Ngày tháng:</span>
									<input name="p1" type="text" id="datepicker_creerE"/>
								</label>
							</div>
							
							<div class="wrapper">
								<label class="img-indent2"><span class="text-form">Số lượng:</span>
									<input name="p1" type="text" />
								</label>
								<label class="fleft"><span class="text-form">Giá bán:</span>
									<input name="p1" type="text" />
								</label>
							</div>
							<div class="wrapper">
								<label class="img-indent2"><span class="text-form">Khách hàng:</span>
									<select id="client" name="client_liste">
										<option value="0000">-------------------------------</option>
										{% for c in client_list %}
											<option value="{{c.id}}">{{c.nom}}</option>
										{% endfor %}
									</select> <a href="javascript: showPopup()"> <img width="20" height="20" src="/static/bouton/add.jpeg"/> </a> </label>
								<label class="fleft"><span class="text-form">Đơn hàng:</span>
									<input name="p2" type="text" />
								</label>
							</div>
							<div class="wrapper">
								<div class="text-form">
									Ghi chú:
								</div>
								<div class="extra-wrap">
									<textarea></textarea>
									<div class="buttons">
										<a class="button" href="#" onClick="document.getElementById('ES-form').reset()">Nhập lại</a>
										<a class="button" href="#" onClick="document.getElementById('ES-form').submit()">Xác nhận</a>
									</div>
								</div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>
		</p>
	</div>
</div>
{% endblock %}
<!--pop up-------------------------------------------->
{% block audessus %}

{% endblock %}